<template>
  <div class="borrow-process-container">
    <div class="page-header">
      <div class="title">借阅申请流程</div>
      <div class="subtitle">在线申请 · 智能审批</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/borrow-system"><AuditOutlined />档案借阅系统</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><FormOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="content-section">
      <a-row :gutter="[24, 24]">
        <a-col :span="16">
          <a-card title="借阅申请" :bordered="false">
            <a-form :model="borrowForm" layout="vertical">
              <a-form-item label="申请人">
                <a-input v-model:value="borrowForm.applicant" placeholder="请输入申请人姓名" />
              </a-form-item>
              <a-form-item label="档案名称">
                <a-select v-model:value="borrowForm.fileName" placeholder="选择要借阅的档案">
                  <a-select-option value="生死簿第123卷">生死簿第123卷</a-select-option>
                  <a-select-option value="业力评定册">业力评定册</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="借阅期限">
                <a-range-picker v-model:value="borrowForm.borrowPeriod" />
              </a-form-item>
              <a-form-item label="申请理由">
                <a-textarea v-model:value="borrowForm.reason" :rows="4" placeholder="请说明借阅用途" />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="submitApplication">提交申请</a-button>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="申请状态" :bordered="false">
            <a-list :data-source="applications" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <div>{{ item.fileName }}</div>
                  <a-tag :color="getStatusColor(item.status)">{{ item.status }}</a-tag>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, AuditOutlined, FormOutlined } from '@ant-design/icons-vue'

const borrowForm = reactive({
  applicant: '',
  fileName: null,
  borrowPeriod: null,
  reason: ''
})

const applications = ref([
  { fileName: '生死簿第120卷', status: '审批中' },
  { fileName: '业力档案册', status: '已批准' },
  { fileName: '转世记录', status: '被拒绝' }
])

const submitApplication = () => {
  console.log('提交申请:', borrowForm)
}

const getStatusColor = (status) => {
  const colorMap = {
    审批中: 'processing',
    已批准: 'success',
    被拒绝: 'error'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.borrow-process-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .content-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }
}
</style>
